<template>
  <div class="home">
    <section class="login">
      <h2 class="title">SmartRobot 后台管理</h2>
      <section class="from">
        <el-input placeholder="请输入用户名" v-model.trim="login.name">
          <template slot="prepend"><i class="el-icon-mobile-phone"></i></template>
        </el-input>
        <el-input placeholder="请输入密码" type="password"  @keyup.enter.native="goLogin" v-model="login.password">
          <template slot="prepend"><i class="el-icon-view"></i></template>
        </el-input>
        <el-button type="primary" round @click="goLogin">登陆</el-button>
      </section>
    </section>
  </div>
</template>
<script>
export default {
  name: 'home',
  data: function () {
    return {
      login: {
        name: '',
        password: ''
      }
    }
  },
  created: function () {}, // 创建时
  beforeMount: function () {}, // 挂载之前
  mounted: function () {}, // 挂载之后
  beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
  updated: function () {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function () {}, // 实例销毁后调用
  methods: {
    goLogin () {
      if (this.login.name && this.login.password) {
        window.localStorage.setItem('uid', this.login.name)
        this.$router.push('info')
      } else {
        this.$notify({
          title: '登陆失败',
          position: 'top-right',
          message: '请填写用户名和密码',
          type: 'error'
        })
      }
    }
  } // 函数
}
</script>
<style lang='scss'>
  .home {
    box-sizing: border-box;
    background-color: #324057;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    .login {
      .el-input {
        width: 15rem;
      }
      .from {
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .el-input-group__append, .el-input-group__prepend {
          padding: 0 15px;
          font-size: 18px;
        }
      }
    }
    .title {
      font-size: 34px;
      color: #fff;
    }
  }
</style>
